Gamification is a powerful tool to increase engagement in eLearning. It makes the entire learning process more interesting, active and participatory. While it may seem complicated to tackle, there are elements that you can easily add to your eLearning course to create a story-driven experience to excite students. Here are the basic elements you can include to get started:

Protagonist, Antagonist and Journey
The protagonist is a character that is relatable to the learner. The antagonist is the struggle or situation the learner is trying to overcome throughout the course journey. By establishing this basic structure, you can mimic the relationship of the student to the concept they are trying to understand in a way that is engaging.

Power Ups
Think of these as an active rewards system and helpful hints. Power ups are tools or abilities created to help your protagonist solve the puzzle. To the learners, they represent mastery of knowledge, so they can keep track of how they're progressing throughout the course. This is an excellent method to enhance skill-building as well as creating a sense of competition.

Easter Eggs
These help you entice your learners. Easter eggs are interactive items in your content that encourage users to slow down and explore the page and find rewards. They can help prevent users from simply clicking through the information. Think of it this way: Easter eggs help convince your learners to read the whole book instead of just picking up the spark notes.

Implement these three techniques and your eLearning modules will be more effective and engaging by design!

So you want to add an Instagram feed to your blog and the idea of anything remotely resembling code gives you the shakes? Never fear, we're here to help!

There is an incredible website called snapwidget.com that makes a simple to use widget that you can embed into your website - it will auto populate your Instagram onto your site. As long as you can handle filling in a simple form and copying and pasting a little bit of HTML code, you're in business.

1. Go to snapwidget.com.

2. Fill out the form. (You can opt to pull in a feed from your account or a feed from a specific hashtag.)

3. Copy the code that is generated when you submit the form. It will be in HTML.

4. Navigate to the back end of your blog and select an HTML widget. Typically there is a widget menu in the "layout" section. If you don't know how to do this, ask the person that helped you set up your blog.

5. Paste the code into the HTML widget. Save it. Make sure the widget is located where you want it to live in your blog's layout.

And you're done!

1. Too much text
People like pictures, plain and simple. The way users interact with websites, and the world in general, is becoming increasingly visual and there is research to back it up. Visual cues increase engagement. When designing, think about simple graphics that can relay the same messages as cluttered boxes of text. Users will be more engaged with your site and your design will be cleaner and more appealing.

2. Not enough context
The text that you do keep in your web design should be informational and help to support your user in their decision making. For e-commerce in particular, it's important to make sure customers understand what you're trying to sell them. Make it compelling and easy to understand for someone who has never heard of your product before. Be straightforward, but don't be afraid to show some personality too.

3. Overly complicated forms
Forms are unavoidable if you plan on doing any kind of lead generation or communication via your website, but there's no reason to bog them down with useless fields. Asking users to give unnecessary information can be the difference between a new customer or an increased bounce rate. Do you really need someone's middle name or favorite color to send them an e-newsletter? Probably not.

4. Forcing users to register to access basic info
Don't let desire for information capture put up a wall between you and your users. Forcing users to register on your site to access information about your products and services is unnecessary and off putting. They will likely just leave and head to a different website. Think about it as give and take: only ask for their information if you are giving something in return like a newsletter or an order fulfillment. UX is a two way street.

5. Not leaving enough time for user testing
This may seem like a no-brainer, but the best way to make sure your UX is on point is user testing! It should be a priority and you should give yourself ample time for a few rounds of UAT in order to achieve the best possible results. You can always revise as you go and the more work you put in before the initial launch, the less work you will have to do in the long run.

If you've worked on a web project before, you know the power of wireframing. Distilling your requirements and design ideas to essential components is key to crafting a great UX experience. Here are our favorite tools to create your next wireframes in no time:

GoMockingbird
http://gomockingbird.com
Why we love it: There is no learning curve with this tool, which is impressive considering how flexible it can be. We love that it is fully web-based, has a customizable grid and all the standard UI elements that you can drop & drag onto your layout. Of all of the tools we've used, it has the best UX for both new and seasoned wireframers.

WireframeSketcher
http://wireframesketcher.com
Why we love it: If you're comfortable with Adobe Creative Suite, this tool will be intuitive. Within the wireframe builder you can drop & drag stock components, create storyboards and actively link to other pages within the project. We recommend this for those who have more complex information architecture to tackle. A bonus feature is being able to export your wireframes to PDF, HTML, PNG or via a native slideshow.

Balsamiq
http://balsamiq.com
Why we love it: Beyond the drag & drop functionality, Balsamiq also has a "quick add" function where you can type in (and auto-complete) UI elements to speed up the layout process. You can also add images and "sketch" them to give your wireframes a bit more visual interest if you're ready for mockups.

In case you've never heard the term before, skeuomorphism in design is a visual holdover of the familiar. It is why your camera app looks like an old camera; why the your phone's calendar looks like a wall calendar, etc. These visual cues usually tell the user what to do with an item that is completely out of its normal context. Once the user is familiar with that behavior, though, the skeuomorphism holds no purpose. Here are 4 reasons why these visual references will actually hurt your UX instead of help it.

Burdening your designs with user assumptions
Want to make a layout intuitive? Skip the skeuomorphism and stick to basic design principles like hierarchy and the grid. Making your reading app look like a bookshelf will communicate that your user should "pick up a book" - but that's about it. Any cool chat function you build in might go undiscovered as it is not automatically related to a shelf and not obvious.

Looking dated.
Wood paneling, stitched leather and binder rings will make your UI look completely out of date in the age of iOS7. Understand the needs and sophistication of your users and cater to them without all of the space-wasting frills.

Limitations in functionality.
In the real world, 3D objects usually serve a single main purpose. You wouldn't expect your bike to also make your coffee in the morning (not yet anyway!) and you wouldn't expect your kitchen chair to have Netflix installed. In this same vein, trapping your UI in skeuomorphism and real world references will limit your creativity. A forward thinking notes app should absolutely handle your larger time management needs, but it won't engage your audience if it looks and functions like a clunky trapper keeper.

Your users will see you as lazy.
In a world of digital possibilities, the choice to reference the real world leaves many users bored. Why not rethink how they should interact and better manage the information you are presenting? The more thoughtful and effortless you make the UX, the more your users will come back for more and ultimately advocate on your behalf.

In a world of acronym overload, the definitions of UX and UI tend to get muddled. And while both are vital to your website, they are not created equally.

Let's start with some basic definitions.

UI stands for User Interface, so when we talk about UI design, we mean the design of the actual tools and elements that people use to navigate through your website.

UX stands for User Experience. UX designers think about how people use the tools and elements on your website and how it makes them feel.

Think about a really great, comfortable pair of shoes. UI is the height of the heel, the curve of the arch, the pliability of the leather. UX is how you feel when you are walking in them.

But the feeling is just the end goal. UX designers take a deep dive into what makes people interact with websites in a certain way by doing field research, face to face interviews, user testings, statistic analysis and creating personas. It's a process that is deeply rooted in both psychology and function. It's intangible, but also vital.

UI and UX cannot exist without one another, but in terms of accomplishing the goals of your website, UX is the closer. The best UX designers create an experience that makes users feel emotionally connected and supported on your website. UX makes people want to click. UX makes people want to stay. UX makes people want to purchase.

UI is the tool, UX is the interaction. UI is the how, UX is the why. You can't have one without the other, but you've been warned: they are NOT the same.